<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="base.css"/>
		<title></title>
		<style>
			.mark{
			    padding-top: 30px;
			    margin-left: 15px;
			}
			.mark>.markfather{
			    margin-top: 10px;
			    height: 4px;
			    width: 70%;
			    background-color: #969696;
			    border-radius: 2px;
			    position: relative;
			}
			.mark>.markfather>.markson{
			    height: 4px;
			    width: 75%;
			    background-color: #F4E8AD;
			    border-radius: 2px;
			    position: relative;
			}
			.mark>.suremark{
			    width: 80px;
			    text-align: center;
			    line-height: 25px;
			    height: 25px;
			    background-color: rgb(255,219,96);
			    color: rgb(100,100,100);
			    border-radius: 2px;
			}
			.markson::after{
			    position: absolute;
			    width: 20px;
			    height: 20px;
			    background-color: rgba(244,232,173, 0.4);
			    content: "";
			    border-radius: 50%;
			    right: 0;
			    transform: translate(50%,-50%);
			}
			.markson::before{
			    position: absolute;
			    width: 10px;
			    height: 10px;
			    background-color: #F4E8AD;
			    border-radius: 50%;
			    right: 0;
			    transform: translate(50%,-50%);
			    content: "";
			}
			.markfather::before{
			    position: absolute;
			    content: '拖动可以评分';
			    left: 50%;
			    top: 20px;
			    color: #969696;
			}
			.markfather>span{
			    position: absolute;
			    bottom: -20px;
			}
			.markfather>.start{
			    left: 0;
			}
			.markfather>.end{
			    right: 0;
			}
			.markson>span{
			    position: absolute;
			    width: 31px;
			    height: 24.5px;
			    background: url(./images/percent.png);
			    right: 0px;
			    bottom: -12px;
			    transform: translate(50%,-100%);
			    text-align: center;
			    line-height: 24.5px;
			}
		</style>
	</head>
	<body oncontextmenu="return false" onselectstart="return false">
	
		<div class="fenhongjizhi">分红机制</div>
		<div class="anbili">
			<div class="title">按比例分红</div>
			<div class="mark clear">
				<div class="markfather fl" id="markfather">
					<span class="start">0</span>
					<div class="markson" id="markson"><span id="text">7</span></div><span class="end">10</span></div>
				<div class="suremark fr">确定评分</div>
			</div>
		</div>
			
		 <!--
        	模块二
        -->
	    <!--<div class="col-xs-9">
            <div id="text_xa_2">安卓:50%</div>
            <div id="box_2">
                <div id="bg_2">
                    <div id="bgcolor_2"></div>
                </div>
                <div id="bt_2"></div>
            </div>
            <div id="text_xa2">苹果:50%</div>
        </div>-->
        
		<script src="../../../js/jquery-1.12.1.min.js"></script>
		<script type="text/javascript">
			;(function($,d){
				function Progress(options){
					var This = this;
					this.opts = $.extend({},Progress.DEFULT,options);
					
					if (This._hasTouch()) {
						
						this.opts.btn.on("touchstart",function(e){
							var e = e||window.event;
							This._touchstart(e);
						})
						
					}else{
						this.opts.btn.mousedown(function(e){
							var e = e||window.event;
							This._mousedown(e);
						})
					}
				}
				
				Progress.DEFULT = {//设置默认参数
					statu:false,
				    ox : 0,
				    lx : 0,
				    left : 0,
				    bgleft : 0
				}
				
				Progress.prototype._hasTouch = function(){
					var touchObj={};
				    touchObj.isSupportTouch = "ontouchend" in document ? true : false;
				    return touchObj.isSupportTouch;
				}
				
				Progress.prototype._mousedown = function(e){
					var This = this;
					this.opts.lx = this.opts.btn.offset().left;
				    this.opts.ox = e.pageX - this.opts.left;
				    this.opts.statu = true;
				  	$(d).on('mousemove',function(e) {
				      	var e = e||window.event
				      	This._mousemove(e);
				    });
				    $(d).on("mouseup",function(){
				      	This._Eventend();
				    });
				},
				Progress.prototype._touchstart = function(e){
					var This = this;
				    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			        this.opts.lx = this.opts.btn.offset().left;
				    this.opts.ox = touch.pageX - this.opts.left;
				    this.opts.statu = true;
				    
				   	$(d).on('touchmove',function(e) {
				      	var e = e||window.event
				      	This._touchmove(e);
				    });
				    $(d).on("touchend",function(){
				      	This._Eventend();
				    });
				},
				
				Progress.prototype._mousemove = function(e){
					if (this.opts.statu) {
			            this.opts.left = e.pageX - this.opts.ox;
			            if (this.opts.left < 0) {
			                this.opts.left = 0;
			            }
			            if (this.opts.left > 252) {
			                this.opts.left = 252;
			            }
			            this.opts.btn.css('left',this.opts.left);
			            this.opts.bgcolor.width(this.opts.left+'%');
			            this.opts.text.html('安卓:' + parseFloat(this.opts.left / 2).toFixed(2) + '%');
			            this.opts.text_xa.html('苹果:' + parseFloat(100 - (this.opts.left / 2)).toFixed(2) + '%');
			      	}
				
				},
				
				Progress.prototype._touchmove = function(e){
					var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			        if (this.opts.statu) {
			            this.opts.left = touch.pageX - this.opts.ox;
			            if (this.opts.left < 0) {
			                this.opts.left = 0;
			            }
			            if (this.opts.left > this.opts.box.width()) {
			                this.opts.left = this.opts.box.width();
			            }
			            this.opts.btn.width(this.opts.left);
			            this.opts.text.html(parseInt(this.opts.left /25.2 ));
			        }
				},
				
				Progress.prototype._Eventend = function(){
					this.opts.statu = false;
				},
				
				
				
				$.extend({
					progress:function(options){
						new Progress(options);
					}
				});
				
			})(jQuery,document)
		</script>
		<script>
			$(document).ready(function(){
				!(function(){
					var $box = $('#markfather');
				    var $btn = $('#markson');
				    var $text = $("#text");
				    
				    var options = {
				    	box:$box,
				    	btn:$btn,
				    	text:$text
				    }
					$.progress(options)
				})();
				
//				
//				!(function(){
//					var $box = $('#box_2');
//				    var $bg = $('#bg_2');
//				    var $bgcolor = $('#bgcolor_2');
//				    var $btn = $('#bt_2');
//				    var $text = $('#text_xa_2');
//				    var $text_xa = $('#text_xa2');
//				    
//				    var options = {
//				    	box:$box,
//				    	bg:$bg,
//				    	bgcolor:$bgcolor,
//				    	btn:$btn,
//				    	text:$text,
//				    	text_xa:$text_xa
//				    }
//					$.progress(options)
//				})()
			})
		</script>
	</body>
</html>